Eatland Docs

category - (products category items)

css - (page stylesheets)

less - (stylesheets with CSS pre-processor)

fonts - (the Font Awesome iconic font)

img - (all images)

js - (page Scripts)

components - (page JavaScript Components)

lib - (page plugins)

main.js - (JavaScript file and module loader)

index.html - (main page document)

sendmail.php - (mail sender php script)

The template is based on the Foundation Framework

The Foundation grid system consist of 12 columns. Width of each column is specified by the small-#, medium-#, and large-# classes.


    <div class="row">
        <div class="small-2 large-4 columns">...</div>
        <div class="small-4 large-4 columns">...</div>
        <div class="small-6 large-4 columns">...</div>
    </div>
    <div class="row">
        <div class="large-3 columns">...</div>
        <div class="large-6 columns">...</div>
        <div class="large-3 columns">...</div>
    </div>
    <div class="row">
        <div class="small-6 large-2 columns">...</div>
        <div class="small-6 large-8 columns">...</div>
        <div class="small-12 large-2 columns">...</div>
    </div>

If you need more information about the Foundation grid system, please visit the official foundation documentation.

For style part of the template we are using Scalable and Modular Architecture for CSS/LESS and it has 2 core goals.

Increase the semantic value of html section and content

Decrease the expectation of a specific html structure

The purpose of SMACSS categorization is to reduse code repetition, to increse consistent experience, and to make the maintenance easier. Under SMACSS there are 5 general categories of css/less rules:

color - (stylesheets for the each theme color)

lib - (page scripts stylesheet)

modules - (stylesheets for the each theme block)

_about.less - (about us section)

_team.less - (team section)

_preloader.less - (page preloader)

...

_base.less - (global styles and resets for this theme)

_theme.less - (theme variables and general components styles)

_layout.less - (classes and styles that define the theme layout)

_module.less - (stylesheet for the each theme component)

style.less - (all the less files)

welcome.less - (welcome page styles)

Is very important how you structure your JavaScript because:

If done right, it makes code easier to understand for others and yourself when re-visting your own code.

Having a decided-upon structure helps keeping future code clean and encourages your declared best practices.

It makes your code testable.

For JavaScript design pattern we are using "Module Pattern", which helps keep the units of code both cleanly separated and well organized.

Each module object is a separate file and is loaded on the page with the help of RequireJS, JavaScript file and module loader.

Here is how a module looks like.


var s,  
    PrimaryNameSpace = {  

        settings : {  
            basicExample: $('.main'),  
            nestedExample : {  
                first: true,  
                second: true,  
                third: true,  
                fourth: true,  
                fifth : ['one', 'two', 'three', 'four', 'five', 'six']  
            },  

            foo: 'bar'  

        },  

        init: function () {  
            s = this.settings;  
             
            this.nextMethod();  
            this.anotherMethod();  
        },  

        nextMethod: function () {  
        },  

        anotherMethod: function () {  
        }  
    };

For more about JavaScript module pattern read the How Do You Structure JavaScript? The Module Pattern Edition article.

First, make sure you have installed nodeJS.

For windows platform just run minify.bat from the js folder.

For other platforms run in terminal from the js folder following command:

node tools/r.js -o tools/build.js

To change the theme color, change the data color of the body tag.


<body data-color="pink">

These are our theme colors.

red

green

pink

orange

yellow

To change the theme currency, write it inside the data-currency attribute on body tag.


<body data-color="pink" data-currency="$">

To change the embedded font, find in the page head link tags.


     <link href='http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700&anp;subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>

To change the font, first go to Google Fonts, choose a font and replace the code above with the generated code.

Next find the _theme.less file in the css/less directory.

At the begining of the document find font variables and change it's content with your new font name

To change the logo image, rename your new image - logo.png, and replace it with current one in images directory.

Search in your html file this code block. Copy and paste a list item to add a new nav.


<nav>
    <ul class="navs-list l-tal-c">
        <li class="nav-item js-nav-item">
            <a href="#products"><p class="nav-text t-fw-l">Products</p></a>
        </li>
        <li class="nav-item js-nav-item">
            <a href="#ingredients"><p class="nav-text t-fw-l">Ingredients</p></a>
        </li>
        <li class="nav-item js-nav-item">
            <a href="#team"><p class="nav-text t-fw-l">Team</p></a>
        </li>
        <li class="nav-item js-nav-item">
            <a href="#about"><p class="nav-text t-fw-l">About</p></a>
        </li>
        <li class="nav-item js-nav-item">
            <a href="#contact"><p class="nav-text t-fw-l">Contact</p></a>
        </li>
    </ul>
</nav>

Anchor href attribute must match an id of a block, where page will scroll to on click.

To add a new product item, find its category html document in categories directory and copy a list item in products-list block.


<li class="products-item js-product-item">
    <div class="product-view l-dis-ib">
        <a href="big image path" class="js-imagelightbox">
            <span class="hover-view" data-icon=""></span>
            <img src="small image path" alt="Product description">
        </a>
    </div>
    <div class="product-short-info l-dis-ib">
        <p class="prod-name js-prod-title">Product name</p>
        <p class="prod-code js-prod-code">Product unique code</p>
    </div>
    <div class="prod-price-block l-dis-ib">
        <span class="add-prod-btn js-add-to-card product-control-btn l-dis-ib">+</span>
        <p class="prod-price js-prod-price l-dis-ib">Product price <span class="curency">$</span></p>
    </div>
</li>

To add a new category item, find category-list block and copy a list item.


<li class="category-item js-catItem" data-category="category-name" data-path="categories/category-name.html">Category name</li>

Next, create a new html file and name it the same as data-category content(it is required for category html to have the name exactly the same as data-category content)

In your new category html file paste following markup and start adding product items


<li class="product-page-item js-product-page" data-category="category-name">
    <div class="prod-page-view">
        <ul class="prod-page-list">
            <li class="cat-products-list prod-page">
                <div class="order-block">
                    <p class="added-products l-dis-ib">Added products <span class="products-number"><span class="js-products-counter"></span></span></p>
                    <span class="order-now-btn js-order-btn l-dis-ib">Pre-Order Now</span>
                </div>
                <div class="products-list-block">
                    <ul class="products-list js-products-list">
                        <li class="products-item js-product-item">
                            <div class="product-view l-dis-ib">
                                <a href="large image path" class="js-imagelightbox">
                                    <span class="hover-view" data-icon=""></span>
                                    <img src="small image path" alt="Product description">
                                </a>
                            </div>
                            <div class="product-short-info l-dis-ib">
                                <p class="prod-name js-prod-title">Product name</p>
                                <p class="prod-code js-prod-code">Product code</p>
                            </div>
                            <div class="prod-price-block l-dis-ib">
                                <span class="add-prod-btn js-add-to-card product-control-btn l-dis-ib">+</span>
                                <p class="prod-price js-prod-price l-dis-ib">Product price<span class="curency"></span></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="cat-products-desc prod-page">
                <article>
                    <div class="category-image-block"><img src="category image" alt=""></div>
                    <div class="category-description-block js-description-block">
                        <h3 class="category-title">Category name</h3>
                        <p class="category-description">
                            Category short history or description
                        </p>
                    </div>
                </article>
            </li>
        </ul>
    </div>
</li>

To add a new slider item, search for the text-slider block and copy/paste a slider item.


<div class="slide-item">
    <h1 class="title">Item title</h1>
    <h3 class="subtitle">Item subtitle</h3>
</div>

To add a new slider item, search for the slider-container block and copy/paste an item.


<div class="slider-item">
    <figure class="item-container">
        <img src="image path" class="item-image" alt="">
        <figcaption class="variation-text l-tal-c">
            <div class="text-container">
                <div class="main-content">
                    <h1 class="title">Slide title</h1>
                    <h3 class="subtitle">Slide description</h3>
                </div>
            </div>
        </figcaption>
    </figure>
</div>

To add a new carousel item in ingredients block, copy/paste a slide item and set the paths to your images


<div class="item">
    <a class="fancybox ingredients-img" rel="gallery1" href="Large image path">
        <img src="Small image path" alt="">
    </a>      
    <a class="fancybox ingredients-img" rel="gallery1" href="Large image path">
        <img src="Small image path" alt="">
    </a>                               
</div>

To add a new testimonial, search for the testimonials-images-list block and copy/paste a slide item.


<div class="testimonial-item">
    <div class="item-header l-tal-c">
        <div class="auth-img l-dis-ib"><img src="Image path" alt=""></div>
        <h4 class="auth-name t-fw-l">Testimonial author</h4>
    </div>
    <div class="item-testim js-item-testim">Main testimonial</div>
</div>

Add your video in three required extensions(.mp4, .ogg, .webm) in the video directory plus, an image to be shown on devices that does not support html5 video and set path to them in your html.


<video preload="auto" autoplay loop class="video-bg js-video-bg" poster="video/video-preview-image.jpg" muted>
    <source src="video/your-video.mp4" type="video/mp4">
    <source src="video/your-video.webm" type="video/webm">
    <source src="video/your-video.ogv" type="video/ogg">
</video>

To change an icon chose a new one from Font Awesome icons change icon class(fa-university).


<div class="icon-block l-dis-ib">
    <i class="fa icon-class"></i>
</div>

If you need more information, please visit this site: Font Awesome official page.

Typography Fonts - Google Fonts

Icon Fonts - Font Awesome, Simple Line Icons

JavaScript library - jQuery

Front-end framework - Foundation

Front-end MVC framework - Backbone.js

Slider - OWL Carousel

Modernizr

Lightbox - Fancybox

File and module loader - RequireJS

Accelerated JavaScript animation - Velocity.js

On scroll reveal animations - Velocity.js, jquery.inview

Custom scrollbar - jQuery custom content scroller

Fully Responsive

Chrome, Firefox, Opera, Safari, IE9+

Structure

Files

HTML

CSS / Less

JavaScript

Customization & Styles

Minify javascript

Theme color

Currency

Font Family

Logo image

Nav item

Product item

Category item

Main slider

Text slider

Carousel

Testimonial slider

Video

Icons

Source & Credits

Fonts Source

Scripts Source

General Info

Responsive

Browser Support